<template>
  <el-row>
    <el-col :span="4"> 
        <div class="side-navbar">
            <div class="navbar-header">
                <img class="navbar-header-img" src="../../assets/img/shop/cat-header1.png">
                喵铺
            </div>
            <div class="navbar-menu">
                <el-menu background-color="#FAF9FA" active-text-color="#eea2a4" router="true">
                    <el-menu-item v-for="item in menuItem" :index="item.path" :key="item.path">
                        <i class="menu-item-icon iconfont" :class="item.icon"></i>
                        <template #title>{{ item.title }}</template>
                    </el-menu-item>
                </el-menu>
            </div>
        </div>
    </el-col>
    <el-col :span="20">
        <div class="shop-header">
            <div class="shop-header-left">
                <i class="fold-icon" :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="collapseMenu()"></i>
                <div class="left-breadcrumb">
                    <el-breadcrumb separator="" 
                        separator-class="separator-icon iconfont cat-icon-chongwutubiao18">
                        <el-breadcrumb-item v-for="breadcrumb in breadcrumbs" :to="breadcrumb.path" :key="breadcrumb.name">
                            {{ breadcrumb.name }}
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </div>
            <div class="shop-header-right">
                <div class="header-right-serve">
                    <i class="serve-cat-icon iconfont cat-icon-chongwutubiao02"></i>
                    <div @click="$router.replace('/goods')">猫服务</div> 
                </div>
            </div>
        </div>
        <div>
            <router-view/>
        </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
    data() {
        return {
            menuItem: [
                {
                    path: '/shop',
                    icon: 'cat-icon-maozhao',
                    title: '首页'
                },
                {
                    path: '/shop/store/buou',
                    icon: 'cat-icon-maowu',
                    title: '猫舍'
                },
                {
                    path: '/shop/buytip',
                    icon: 'cat-icon-maolingdang',
                    title: '购买须知'
                },
                {
                    path: '/shop/knowledge',
                    icon: 'cat-icon-maoxiantuan',
                    title: '猫咪知识'
                },
                {
                    path: '/shop/service',
                    icon: 'cat-icon-zhaocaimao',
                    title: '售后服务'
                }
            ]
        }
    },
    computed: {
        breadcrumbs() {
            return this.$store.state.shopBreadcrumb;
        }
    }
}
</script>

<style lang="less">
    @import url('../../assets/less/common.less');
    @import url('../../assets/font/catfont/catfont.css');

    .theme-color {
        color: @theme-color;
    }

    .el-menu {
        border-right: 0;
    }

    .el-menu-item {
        padding-left: 40px !important;
        .menu-item-icon {
            margin-right: 20px;
            height: 100px;
        }
    }

    .el-menu-item:hover {
        background-color: #F3F1F3 !important;
    }

    .side-navbar {
        height: calc(98vh);
        background-color: @backgroud-color;
        padding-top: 14px;
        .navbar-header {
            display: flex;
            align-content: center;
            justify-content: center;
            font-family: "catfont";
            font-size: 34px;
            margin-bottom: 14px;
            padding-right: 20px;
            .navbar-header-img {
                width: 37px;
                margin-right: 3px;
            }
        }
    }

    .shop-header {
        height: 60px;
        box-shadow: 1px 1px 2px #D4D7E0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .shop-header-left{
            display: flex;
            align-items: center;
            .fold-icon {
                margin-left: 23px;
                margin-right: 20px;
                transform: scale(1.2);
                &:hover {
                    color: @theme-color;
                    cursor: pointer;
                }
            }
            .left-breadcrumb {
                .separator-icon {
                    color: @theme-color;
                }
                .el-breadcrumb__item:last-child {
                    font-size: 15px;
                    font-weight: 400;
                    padding-top: 1.2px;
                }
            }
        }
        .shop-header-right {
            margin-right: 25px;
            .header-right-serve {
                display: flex;
                align-items: center;
                .serve-cat-icon {
                    color: @theme-color;
                    transform: scale(1.7);
                    margin-right: 6px;
                }
                &:hover {
                    color: @theme-color;
                    cursor: pointer;
                }
            }
        }
    }
</style>